<template>
  <el-dialog
    :model-value="show"
    title="用途类型新增"
    width="800px"
    append-to-body
    :before-close="handleClose"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    destroy-on-close
  >
    <div class="form-title">基础信息</div>
    <el-form
      ref="ruleFormRef"
      :model="applyForm"
      :rules="rules"
      label-width="120px"
      class="form-box"
    >
      <el-form-item label="域名用途名称：" prop="name">
        <el-input
          v-model="applyForm.name"
          placeholder="请确定用途名称无重复"
          maxlength="100"
        />
        <!-- <div class="form-intro">请确定用途名称无重复</div> -->
      </el-form-item>
      <el-form-item label="用途类别：" prop="level">
        <el-select v-model="applyForm.level" placeholder="请确定用途级别">
          <el-option
            v-for="item in typeList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <!-- <div class="form-intro">请确定用途级别</div> -->
      </el-form-item>
      <el-form-item
        label="所属上级："
        v-if="applyForm.level === 2"
        prop="parent_id"
      >
        <el-select v-model="applyForm.parent_id" placeholder="请选择所属上级">
          <el-option
            v-for="item in parentList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <!-- <div class="form-intro">请确定用途级别</div> -->
      </el-form-item>
    </el-form>
    <div v-show="applyForm.level === 2" class="form-title">权限设置</div>
    <RoleConfig v-show="applyForm.level === 2" @changeRole="changeRoleConfig" />
    <template #footer>
      <el-button
        type="primary"
        :loading="loading"
        :disabled="!show"
        @click="submitApply"
      >
        提交
      </el-button>
      <el-button type="info" @click="handleClose">取消</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import RoleConfig from '@/components/RoleConfig';
import { platformDomainUsageNew, platformDomainUsageAll } from '@/api/system';
const props = defineProps({
  show: {
    type: Boolean,
    default: false
  }
});
const emit = defineEmits();

const applyForm = ref({});
const rules = reactive({
  name: {
    required: true,
    message: '请输入域名用途名称',
    trigger: 'change'
  },
  level: {
    required: true,
    message: '请选择用途类别',
    trigger: 'change'
  },
  parent_id: {
    required: true,
    message: '请选择所属上级',
    trigger: 'change'
  }
});

const typeList = ref([]);
const parentList = ref([]);

function getOptions() {
  const _form = applyForm.value;

  typeList.value = [
    { label: '一级', value: 1 },
    { label: '二级', value: 2 }
  ];
  _form.level = _form.level || typeList.value?.[0]?.value;

  platformDomainUsageAll().then(res => {
    parentList.value = (res.data || []).map(item => {
      return {
        label: item.name,
        value: item.id
      };
    });
  });
}

function changeRoleConfig({ visibleList }) {
  applyForm.value.visible_companies = visibleList || [];
}

// 关闭
function handleClose() {
  emit('update:show', false);
}

// 提交
const loading = ref(false);
const ruleFormRef = ref();
async function submitApply() {
  try {
    await ruleFormRef.value.validate();
    const _form = JSON.parse(JSON.stringify(applyForm.value));
    if (_form.level !== 2) {
      delete _form.parent_id;
      delete _form.visible_companies;
    }

    loading.value = true;
    platformDomainUsageNew(_form)
      .then(() => {
        $msg.success('用途类型新增成功');
        handleClose();
        emit('reload');
      })
      .finally(() => {
        loading.value = false;
      });
  } catch {
    console.log('数据字典管理-域名用途-用途类型新增-表单提交校验未通过');
  }
}

// 初始化表单
watch(
  () => props.show,
  val => {
    if (!val) return;
    applyForm.value = {
      visible_companies: []
    };
    getOptions();
  }
);
</script>

<style lang="scss" scoped></style>
